<!DOCTYPE html>
<html lang="en">

<head>
    <title>活动报名</title>
    <#include "/zz/components/meta.html" />
    <#include "/zz/components/stylesheets.html" />
    <link rel="stylesheet" href="/zz/stylesheets/enroll.css?v=1">
</head>

<body>
    <div id="app">
        <div class="title theme-color1">${activityTitle!}</div>
        <div class="field">
            <input class="input" type="text" v-model="name" placeholder="请输入姓名" />
        </div>
        <div class="field">
            <input class="input" type="tel" v-model="mobile" placeholder="请输入电话" />
        </div>
        <div class="field">
            <textarea class="input" v-model="remark" :rows="4" placeholder="备注"></textarea>
        </div>
        <div class="button-container">
            <div class="button theme-background-color1" @click="submit">提交</div>
        </div>
    </div>
    <#include "/zz/components/scripts.html" />
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                code: '${code!}',
                name: '',
                mobile: '',
                remark: ''
            }
        },
        mounted: function() {},
        methods: {
            submit() {
                if (!this.name) {
                    msg("请输入姓名");
                    return;
                }
                if (!this.mobile) {
                    msg("请输入电话");
                    return;
                }
                var url = "/zz/activity/enroll"
                var param = {
                    name: this.name,
                    mobile: this.mobile,
                    remark: this.remark,
                    code: this.code
                };
                var success = (response) => {
                    remind('报名成功', () => {
                        window.location.href = '/zz/web/' + this.code;
                    });
                }
                var fail = (response) => {
                    msg(response.msg);
                }
                var complete = () => {}
                axiosRequestPro(param, url, success, fail, complete);
            }
        }
    })
    </script>
</body>

</html>